<template>
	<div class="single-box">
         <web-header :title="currentCostCategory+'计算'"></web-header>
		<div class="total-box">
			<van-field v-model="from.startDate" label="开始时间:" placeholder="请输入" type="text" clearable />
			<van-field v-model="from.endDate" label="结束时间:" placeholder="请输入" type="text" clearable />
			<van-field v-model="from.totalMoney" label="总费用:" placeholder="请输入" type="number" clearable />
		</div>
		<div class="detail-box">
			<div class="detail-title">明细</div>
			<div class="section-box" v-for="item in from.childrens" :key="item.id">
				<div class="cell-box">
					<van-field v-model="item.startDate" label="开始时间:" placeholder="请输入" type="text" clearable />
					<van-field v-model="item.endDate" label="结束时间:" placeholder="请输入" type="text" clearable />
					<van-field
						v-model="item.payRoomsText"
						label="支付房间:"
						placeholder="请选择"
						type="text"
						readonly
						clearable
						@click="onSelectPayCategoriy(item)"
					/>
					<van-field v-model="item.desc" label="备注:" placeholder="请输入" type="text" clearable />
				</div>
				<div class="tools">
					<van-button type="danger" @click="toDelete(item)">删除</van-button>
				</div>
			</div>
		</div>
		<div class="footer-wrap">
			<div @click="toAdd">添加明细</div>
			<div @click="toCalculationDetails">计算明细</div>
		</div>
		<van-popup
			v-model:show="categoryPopupShow"
			teleport="#app"
			round
			position="bottom"
			:style="{ height: '50%' }"
			:safe-area-inset-bottom="true"
		>
			<div class="payCategoryInfos-box">
				<div
					class="item-box"
					v-for="item in payRoomInfos"
					:key="item.costRoomConfig.roomType"
					@click="item.isSelected = !item.isSelected"
				>
					<p class="item-title">{{ item.costRoomConfig.roomType }}</p>
					<img v-show="item.isSelected" class="item-img" src="@/assets/images/common/icon_selected.png" alt="" />
				</div>
				<div class="payCategoryInfos-tool">
					<van-button type="primary" @click="onCategoryConfirm">确定</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { storeToRefs } from "pinia";
import { CostCalculateStore } from "@/store/costCalculate";
import { nanoid } from "nanoid";
import { useRouter } from "vue-router";
import { CostConfig, CostCategory, RoomType, CostInfo, CostInfoChildren, PayRoomInfo } from "@/interface/costCalculate";

const { proxy } = useCurrentInstance();
const router = useRouter();

const costCalculateStore = CostCalculateStore();

let { costConfigs, currentCostCategory, currentCostInfo } = storeToRefs(costCalculateStore);
const costConfig = ref<CostConfig>();

const from = reactive<CostInfo>(
	currentCostInfo.value || {
        costCategory: currentCostCategory.value,
        totalMoney: '',
        startDate: '',
        endDate: '',
        days: 0,
		childrens: []
	}
);

const payRoomInfos = ref<PayRoomInfo[]>([])

//选择需要支付的房间
const currentChildren = ref<CostInfoChildren>();
const categoryPopupShow = ref(false);
const onCategoryConfirm = (val: any) => {
	categoryPopupShow.value = false;
    if (!currentChildren.value) {
        return
    }
	currentChildren.value.payRooms = payRoomInfos.value.filter(ele => ele.isSelected);
	currentChildren.value.payRoomsText = currentChildren.value.payRooms.map(ele=>ele.costRoomConfig.roomType).join("、");
};

const toAdd = async () => {
	let children: CostInfoChildren = {
        id: nanoid(8),
        mean: 0,
        desc: "",
        payRoomsText: "",
        payRooms: [],
        costCategory: currentCostCategory.value,
        totalMoney: "",
        startDate: "",
        endDate: "",
        days: 0,
        childrens: []
    };
	from.childrens.push(children);
};

const toDelete = (item: CostInfoChildren) => {
	let index = from.childrens.findIndex(ele => ele.id == item.id);
	from.childrens.splice(index, 1);
};

const onSelectPayCategoriy = (item: CostInfoChildren) => {
	currentChildren.value = item;
	categoryPopupShow.value = true;
};

const toCalculationDetails = async () => {    
	currentCostInfo.value = from;
    
	router.push("/costCalculate/single/detail");
};

onMounted(() => {
	if (currentCostInfo.value) {
		currentCostInfo.value.costCategory = currentCostCategory.value
	}
    costConfig.value = costConfigs.value.find((ele:CostConfig)=> ele.costCategory==currentCostCategory.value)

	//设置支付房间信息
	payRoomInfos.value = []
    if (costConfig.value) {
        for (const roomConfig of costConfig.value.roomConfigs) {
		    let info: PayRoomInfo = {
                isSelected: false,
                costRoomConfig: roomConfig
            }
		    payRoomInfos.value.push(info)
	    }
    }
});
</script>
<style lang="scss" scoped>
.nav-bar {
	height: 0.5rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	font-size: 0.2rem;
	border-bottom: 1px solid #e0e0e0;
}

:deep(.van-field) {
	font-size: 0.14rem;
	// border-radius: 8px;
}

.detail-box {
	margin-top: 0.2rem;
	padding: 0.2rem 0.16rem;
	.detail-title {
		font-size: 0.15rem;
		color: #666;
	}
	.section-box {
		margin-top: 0.1rem;
		border-radius: 0.04rem;
		background-color: #fff;
		.cell-box {
		}
		.tools {
			display: flex;
			justify-content: end;
			border-top: 1px solid #e0e0e0;
			padding: 0.1rem;
			.van-button {
				width: 1rem;
				height: 0.4rem;
			}
		}
	}
}

.footer-wrap {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0.1rem .1rem .5rem;
	margin-top: 0.15rem;
	color: #3369fe;
}
.payCategoryInfos-box {
	padding: 0.3rem 0 0 0;
	.item-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.2rem 0.16rem;
		.item-title {
			font-size: 0.14rem;
			color: #000;
		}
		.item-img {
			width: 0.2rem;
			height: 0.2rem;
		}
		&:nth-child(n + 2) {
			border-top: 1px solid #e0e0e0;
		}
	}
	.payCategoryInfos-tool {
		display: flex;
		justify-content: center;
		padding: 0.2rem;
		.van-button {
			width: 2rem;
			height: 0.4rem;
		}
	}
}
</style>
